import { Card, Col, Row } from "antd";
import data from "../../data/right";
import CardItemContent from "./components/CardItemContent";
import { MonitorOutlined } from "@ant-design/icons";

function index() {
  return (
    <>
      {" "}
      <Row style={{ marginLeft: 20 }}>
        {data.map((item) => (
          <Col key={item.id} span={6}>
            <Card
              hoverable
              style={{
                width: 240,
                marginBottom: 10,
                backgroundImage:
                  "linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)",
              }}
              cover={
                <>
                  <CardItemContent key={item.id} data={item}></CardItemContent>
                </>
              }
            >
              <div>
                <MonitorOutlined />
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </>
  );
}

export default index;
